<template>
    <div class="room-manage">
        <div class="personal-manage-title">
            终端版本查看-
            <el-select
                style="width: 120px"
                v-model="pageType"
                placeholder="请选择"
                @change="getPage"
                size="small"
            >
                <el-option
                    v-for="(item, index) in typeListCopy"
                    :key="index"
                    :label="item.managementTypeName"
                    :value="item.managementType"
                ></el-option>
            </el-select>
        </div>
        <div class="personal-manage-table-wrapper">
            <el-table
                :data="showList"
                stripe
                border
                style="width: 100%"
                size="small"
                :header-cell-style="headerCellStyle"
            >
                <el-table-column prop="userName" label="序号" width="50">
                    <template slot-scope="scope">{{
                        scope.$index + 1 + 10 * (position - 1)
                    }}</template>
                </el-table-column>
                <el-table-column
                    prop="versionCode"
                    label="版本号"
                ></el-table-column>
                <el-table-column
                    prop="managementTypeName"
                    label="经营类型"
                ></el-table-column>
                <el-table-column
                    prop="versionName"
                    label="版本名称"
                ></el-table-column>
                <el-table-column prop="mustupdata" label="是否强制升级">
                    <template slot-scope="scope">
                        <div v-show="scope.row.mustupdata === 0">强制</div>
                        <div v-show="scope.row.mustupdata === 1">不强制</div>
                    </template>
                </el-table-column>
                <!--<el-table-column-->
                <!--prop="chipID"-->
                <!--label="设备序列号"-->
                <!--width="180">-->
                <!--</el-table-column>-->
                <el-table-column prop="releaseDate" label="发布日期">
                    <template slot-scope="scope">{{
                        $F(scope.row.releaseDate)
                    }}</template>
                </el-table-column>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <div
                            style="
                                line-height: 18px;
                                font-size: 16px;
                                width: 100%;
                                word-wrap: break-word;
                                white-space: pre-line;
                            "
                        >
                            <div>更新说明：</div>
                            <div>{{ props.row.illustrate }}</div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog
            title="新增终端版本"
            :visible.sync="dialogFormVisible"
            width="800px"
        >
            <el-form label-position="right">
                <el-form-item label="版本号" :label-width="formLabelWidth">
                    <el-input
                        v-model="versionCode"
                        autocomplete="off"
                        placeholder="请填写终端版本的版本号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="版本名称" :label-width="formLabelWidth">
                    <el-input
                        v-model="versionName"
                        autocomplete="off"
                        placeholder="请填写终端版本的版本名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="更新说明" :label-width="formLabelWidth">
                    <el-input
                        type="textarea"
                        :rows="4"
                        v-model="illustrate"
                        autocomplete="off"
                        placeholder="请填写说明"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="是否强制升级"
                    :label-width="formLabelWidth"
                >
                    <el-radio v-model="mustupdata" :label="0">强制</el-radio>
                    <el-radio v-model="mustupdata" :label="1">不强制</el-radio>
                </el-form-item>
                <el-form-item label="上传文件" :label-width="formLabelWidth">
                    <!-- <div class="down-load-button-in-stock">oss直传测试 -->
                    <el-upload
                        ref="upload"
                        class="upload-demo"
                        action
                        :http-request="ossUpLoad"
                        :show-file-list="true"
                        :multiple="false"
                        :limit="1"
                    >
                        <el-button
                            size="small"
                            type="primary"
                            @click="$refs.upload.clearFiles()"
                            >点击上传</el-button
                        >
                        <!-- <div slot="tip" class="el-upload__tip">只能上传zip文件</div> -->
                    </el-upload>
                    <!-- </div> -->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog" size="small">取 消</el-button>
                <el-button type="primary" @click="okDialog" size="small"
                    >确 定</el-button
                >
            </div>
        </el-dialog>

        <el-dialog
            title="编辑终端版本"
            :visible.sync="dialogFormVisible2"
            width="800px"
        >
            <el-form label-position="right">
                <el-form-item label="版本号" :label-width="formLabelWidth">
                    <el-input
                        v-model="versionCodeEdit"
                        autocomplete="off"
                        placeholder="请填写终端的版本号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="版本名称" :label-width="formLabelWidth">
                    <el-input
                        v-model="versionNameEdit"
                        autocomplete="off"
                        placeholder="请填写终端的版本名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="更新说明" :label-width="formLabelWidth">
                    <el-input
                        type="textarea"
                        :rows="4"
                        v-model="illustrateEdit"
                        autocomplete="off"
                        placeholder="请填写说明"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="是否强制升级"
                    :label-width="formLabelWidth"
                >
                    <el-radio v-model="mustupdataEdit" :label="0"
                        >强制</el-radio
                    >
                    <el-radio v-model="mustupdataEdit" :label="1"
                        >不强制</el-radio
                    >
                </el-form-item>
                <el-form-item label="上传文件" :label-width="formLabelWidth">
                    <!-- <div class="down-load-button-in-stock">oss直传测试 -->
                    <el-upload
                        ref="upload2"
                        class="upload-demo"
                        action
                        :http-request="ossUpLoad"
                        :show-file-list="true"
                        :multiple="false"
                        :limit="1"
                    >
                        <el-button
                            size="small"
                            type="primary"
                            @click="$refs.upload2.clearFiles()"
                            >点击上传</el-button
                        >
                        <!-- <div slot="tip" class="el-upload__tip">只能上传zip文件</div> -->
                    </el-upload>
                    <!-- </div> -->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog2" size="small">取 消</el-button>
                <el-button type="primary" @click="okDialog2" size="small"
                    >确 定</el-button
                >
            </div>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span>是否确认删除</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelRemove" size="small">取 消</el-button>
                <el-button type="primary" @click="okRemove" size="small"
                    >确 定</el-button
                >
            </span>
        </el-dialog>

        <div class="pay-set-wrapper-table-block">
            <div class="pay-set-wrapper-table-block-in">
                <el-pagination
                    background
                    :current-page.sync="position"
                    @current-change="handleCurrentChange"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="totalNum"
                ></el-pagination>
            </div>
        </div>
        <div class="page-padding"></div>

        <div
            class="page-all-loading"
            v-loading="isLoading2"
            v-show="isLoading2"
            element-loading-text="正在上传终端版本，请稍后"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.7)"
        ></div>
    </div>
</template>

<script type="text/ecmascript-6">
// 1、一页20条数据
// 2、勾选框和下拉框和输入框做判断
import axios from 'axios'
export default {
    data: function () {
        return {
            typeListCopy: [],
            pageType: null,
            isLoading2: false,
            options: {
                // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
                target: this.$store.state.IP + '/system/apkPackageManage/bigFile',
                singleFile: true,
                chunkSize: 2 * 1024 * 1024,
                testChunks: false,
                headers: {
                    Authorization: localStorage.AuthorizationToken2
                }
            },
            attrs: {
                // accept: ['aplication/zip']
                // accept: ['.zip'] // 开了zip过滤会很卡
                // accept: ['.jpg']
            },
            versionCode: '', // 版本号
            versionName: '', // 版本名称
            illustrate: '', // 说明
            releaseDate: '', // 日期
            url: '', // 文件地址

            showList: [], // 展示列表
            totalNum: 0, // 总条数

            formLabelWidth: '120px',

            apkId: '', // 正在编辑的apkId
            versionCodeEdit: '', // 版本号
            versionNameEdit: '', // 版本名称
            illustrateEdit: '', // 说明
            releaseDateEdit: '', // 日期
            urlEdit: '', // 文件地址

            dialogFormVisible: false, // 新增弹框
            dialogFormVisible2: false, // 编辑弹框
            dialogFormVisibleMove: false, // 移动弹框

            position: 1,
            dialogVisible: false,

            nowRemoveId: '',
            statusText: {
                success: '成功了',
                error: '出错了',
                uploading: '上传中',
                paused: '暂停中',
                waiting: '等待中'
            },
            mustupdata: 1,
            mustupdataEdit: 1
        }
    },
    components: {
    },
    mounted () {
        this.typeListCopy = this.$store.state.typeList.filter(item => item.managementType !== 3)
        this.pageType = this.typeListCopy.length > 0 ? this.typeListCopy[0].managementType : null
        this.cutArray()
    },
    watch: {
        dialogFormVisible () {
            if (this.dialogFormVisible) {
            } else {
                this.versionCode = ''
                this.versionName = ''
                this.illustrate = ''
                this.releaseDate = ''
                this.url = ''
                this.urlEdit = ''
                this.mustupdata = 1
                this.$refs.upload.clearFiles()
            }
        },
        dialogFormVisible2 () {
            if (this.dialogFormVisible2) {
            } else {
                this.apkId = ''
                this.versionCodeEdit = ''
                this.versionNameEdit = ''
                this.illustrateEdit = ''
                this.releaseDateEdit = ''
                this.url = ''
                this.urlEdit = ''
                this.mustupdataEdit = 1
                this.$refs.upload2.clearFiles()
            }
        },
        position () {
            this.cutArray()
        }
    },
    methods: {
        ossUpLoad (content) {
            this.isLoading2 = true
            this.getOssParms(content)
        },
        getOssParms (content) {
            let params = {
                params: {}
            }
            this.$http
                .get(
                    this.$store.state.IP +
                    '/ossUpload',
                    params
                )
                .then(
                    response => {
                        console.log(
                            '-------------------------------------------'
                        )
                        console.log('调用oss参数返回')
                        response = response.body
                        console.log(response.data)
                        this.uploadOss(response.data, content)
                        console.log(
                            '******************************************'
                        )
                    },
                    response => {
                        console.log('通讯失败')
                    }
                )
        },
        uploadOss (params, content) {
            console.log(params)
            console.log(content)
            let data = this.setParams(params, content)
            console.log(data.get('key'))
            axios.post(params.host, data, {
                headers: { 'Content-Type': 'multipart/form-data' }
            })
                .then((res) => {
                    console.log(res)
                    console.log('这是上传阿里云的返回值')
                    this.url = params.host + '/' + data.get('key')
                    this.urlEdit = params.host + '/' + data.get('key')
                    this.isLoading2 = false
                    this.$message({
                        showClose: true,
                        message: '上传成功',
                        type: 'success'
                    })
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        setParams (params, content) { // 设置请求参数
            let formData = new FormData()
            let filename = Date.parse(new Date()) + '.zip'
            // 文件名字，可设置路径
            formData.append('key', params.dir + '/' + filename)
            // policy规定了请求的表单域的合法性
            formData.append('policy', params.policy)
            // Bucket 拥有者的Access Key Id
            formData.append('OSSAccessKeyId', params.accessid)
            // 让服务端返回200,不然，默认会返回204
            formData.append('success_action_status', '200')
            // 根据Access Key Secret和policy计算的签名信息，OSS验证该签名信息从而验证该Post请求的合法性
            // formData.append('callback', params.callback)
            formData.append('callback', '')
            formData.append('signature', params.signature)
            formData.append('name', filename)
            // 需要上传的文件filer
            formData.append('file', content.file, filename)
            return formData
        },
        // 上传成功
        onFileSuccess (rootFile, file, response, chunk) { // 内部自动调用
            let res = JSON.parse(response)
            console.log(res)
            console.log('上传成功！！！！！！！！！！！！！！！！！！！！！！！！！！')
            this.url = res.data.savefilepath
            this.$message({
                showClose: true,
                message: '上传成功',
                type: 'success'
            })
        },
        onFileSuccess2 (rootFile, file, response, chunk) { // 内部自动调用
            let res = JSON.parse(response)
            console.log(res)
            console.log('上传成功！！！！！！！！！！！！！！！！！！！！！！！！！！')
            this.urlEdit = res.data.savefilepath
            this.$message({
                showClose: true,
                message: '上传成功',
                type: 'success'
            })
        },
        onFileError (rootFile, file, response, chunk) {
            let res = JSON.parse(response)
            console.log(res)
            console.log('上传失败！！！！！！！！！！！！！！！！！！！！！！！！！！')
            this.$message({
                showClose: true,
                message: '上传失败',
                type: 'warning'
            })
        },
        fileAdded (file, event) {
            if (!/zip/gi.test(file.fileType)) {
                this.$message({
                    showClose: true,
                    message: '请选择zip类型文件',
                    type: 'warning'
                })
                const uploaderInstance = this.$refs.uploader.uploader
                uploaderInstance.cancel()
            }
        },

        okDialog () {
            let message = ''
            if (this.url === '') {
                message = '请上传终端版本'
            }
            if (this.illustrate === '') {
                message = '请输入说明'
            }
            if (this.versionName === '') {
                message = '请输入版本名称'
            }
            if (this.versionCode === '') {
                message = '请输入版本号'
            }
            if (this.isNumChar(this.versionCode)) {
                message = '版本号请输入数字'
            }
            if (message !== '') {
                this.$message({
                    showClose: true,
                    message: message,
                    type: 'warning'
                })
                return
            }
            this.dialogFormVisible = false
            let releaseDate = this.toTimeS(new Date())
            this.$http.post(this.$store.state.IP + '/system/apkPackageManage/saveOrEdit', {
                data: {
                    versionCode: this.versionCode,
                    versionName: this.versionName,
                    url: this.url,
                    illustrate: this.illustrate,
                    releaseDate: releaseDate,
                    mustupdata: this.mustupdata
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用新增终端版本信息成功')
                    console.log(response.data)
                    this.cutArray()
                    this.versionCode = ''
                    this.versionName = ''
                    this.url = ''
                    this.illustrate = ''
                    this.mustupdata = 1
                    this.$message({
                        showClose: true,
                        message: '新增成功',
                        type: 'success'
                    })
                }
                if (response.ret !== '0') {
                    console.log('调用新增终端版本信息失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        cancelDialog () {
            this.dialogFormVisible = false
            this.versionCode = ''
            this.versionName = ''
            this.url = ''
            this.illustrate = ''
            this.mustupdataEdit = 1
        },
        addOutPosition () {
            this.dialogFormVisible = true
        },

        toTimeS (date) {
            return date.getFullYear() + '-' + (this.outTen(date.getMonth() + 1)).toString() + '-' + (this.outTen(date.getDate())).toString() + ' ' + (this.outTen(date.getHours())).toString() + ':' + (this.outTen(date.getMinutes())).toString() + ':' + (this.outTen(date.getSeconds())).toString()
        },

        outTen (item) {
            if (item < 10) {
                return '0' + item
            } else {
                return item
            }
        },

        checkRemove (index, row) {
            this.nowRemoveId = row.apkId
            this.dialogVisible = true
        }, // 删除按钮
        okRemove () {
            this.dialogVisible = false
            let params = {
                params: {
                }
            }
            this.$http.get(this.$store.state.IP + '/system/apkPackageManage/delete/' + this.nowRemoveId, params).then(response => {
                console.log('-------------------------------------------')
                console.log('调用删除包管理信息返回')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用删除包管理信息成功')
                    this.nowRemoveId = ''
                    this.cutArray()
                    this.$message({
                        showClose: true,
                        message: '删除成功',
                        type: 'success'
                    })
                }
                if (response.ret !== '0') {
                    console.log('调用删除包管理信息失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
            // 调用删除包厢接口
        }, // 删除确认框确认
        cancelRemove () {
            this.dialogVisible = false
            this.nowRemoveId = ''
        }, // 删除确认框取消

        editOutPosition (index, row) {
            this.apkId = row.apkId
            this.versionCodeEdit = row.versionCode
            this.versionNameEdit = row.versionName
            this.illustrateEdit = row.illustrate
            this.releaseDateEdit = row.releaseDate
            this.urlEdit = row.url
            this.dialogFormVisible2 = true
            this.mustupdataEdit = row.mustupdata
            // this.mustupdataEdit = 1
        }, // 编辑按钮
        okDialog2 () {
            let message = ''
            if (this.urlEdit === '') {
                message = '请上传终端版本'
            }
            if (this.illustrateEdit === '') {
                message = '请输入说明'
            }
            if (this.versionNameEdit === '') {
                message = '请输入版本名称'
            }
            if (this.versionCodeEdit === '') {
                message = '请输入版本号'
            }
            if (this.isNumChar(this.versionCodeEdit)) {
                message = '版本号请输入数字'
            }
            if (message !== '') {
                this.$message({
                    showClose: true,
                    message: message,
                    type: 'warning'
                })
                return
            }
            this.dialogFormVisible2 = false
            // let releaseDate = this.toTimeS(new Date())
            this.$http.post(this.$store.state.IP + '/system/apkPackageManage/saveOrEdit', {
                data: {
                    apkId: this.apkId,
                    versionCode: this.versionCodeEdit,
                    versionName: this.versionNameEdit,
                    url: this.urlEdit,
                    illustrate: this.illustrateEdit,
                    releaseDate: this.releaseDateEdit,
                    mustupdata: this.mustupdataEdit
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('编辑终端版本信息成功')
                    console.log(response.data)
                    this.cutArray()
                    this.apkId = ''
                    this.versionCodeEdit = ''
                    this.versionNameEdit = ''
                    this.illustrateEdit = ''
                    this.releaseDateEdit = ''
                    this.urlEdit = ''
                    this.mustupdataEdit = 1
                    this.$message({
                        showClose: true,
                        message: '编辑成功',
                        type: 'success'
                    })
                }
                if (response.ret !== '0') {
                    console.log('编辑终端版本信息失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        cancelDialog2 () {
            this.dialogFormVisible2 = false
            this.apkId = ''
            this.versionCodeEdit = ''
            this.versionNameEdit = ''
            this.illustrateEdit = ''
            this.releaseDateEdit = ''
            this.urlEdit = ''
            this.mustupdataEdit = 1
        },

        handleCurrentChange (val) {
            this.position = val
        },
        cutArray () {
            this.getPage()
        },
        getPage () {
            this.$http.post(this.$store.state.IP + '/system/apkPackageManage/page', {
                data: {
                    managementType: this.pageType,
                    page: this.position - 1, // 页数
                    limit: 10 // 一页显示数量
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    // console.log('调用apk列表成功')
                    console.log(response.data)
                    this.showList = response.data.list
                    this.totalNum = response.data.total
                }
                if (response.ret !== '0') {
                    // console.log('调用apk列表失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.down-load-button-in-stock
    display: inline-block
    vertical-align: top
    height: 36px
    min-width: 98px
    line-height: 36px
    text-align: center
    cursor: pointer
    overflow: hidden
    position: relative
    -webkit-user-select: none
    -moz-user-select: none
    margin-right: 10px
    border: 1px solid #dcdfe6
    color: #fff
    border-radius: 5px
    background: #66b1ff
    font-size: 14px
    padding: 0 10px

    .down-load-button-in-stock-in
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%
        z-index: 1
        opacity: 0

.room-manage
    width: 100%
    background: #fff
    min-height: calc(100vh - 65px)

    .personal-manage-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px
        background: #f1f0f5
        position: relative

        .out-position-manage-title-button
            position: absolute
            right: 0
            top: 0

    .personal-manage-button-wrapper
        width: 100%
        height: 60px
        line-height: 60px
        position: relative

        .personal-manage-button-text
            font-weight: 900
            font-size: 18px

        .personal-manage-button
            border-radius: 3px
            height: 40px
            width: 100px
            position: absolute
            right: 0
            top: 10px
            background: #20b2fe
            color: #fff
            text-align: center
            line-height: 40px
            cursor: pointer
            -webkit-user-select: none
            -moz-user-select: none

    .pay-set-wrapper-table-block
        width: 100%
        padding-top: 22px
        height: 50px
        background: #fff
        box-sizing: border-box

        .pay-set-wrapper-table-block-in
            float: right
            padding-right: 17px

    .page-padding
        width: 100%
        height: 20px
        background: #fff

    .personal-manage-table-wrapper
        width: 100%

    .page-all-loading
        position: fixed
        width: 100%
        height: 100%
        left: 0
        top: 0
        z-index: 10000
</style>
